<template>
  <el-dialog v-model="updateDialog" title="修改公告" width="800">
    <el-form :rules="rules" :model="RowData" ref="ruleFormRef" style="height: 400px">
      <el-form-item label="公告标题" label-width="120" prop="announcementTitle">
        <el-input autocomplete="off" v-model="RowData.announcementTitle" />
      </el-form-item>
      <el-form-item label="公告内容" label-width="120" prop="announcementContent">
        <div ref="editorDiv" style="width: 600px;height: 200px">
          <Toolbar :editor="editorRef" :mode="mode"/>
          <Editor v-model="RowData.announcementContent" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated"/>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialog = false">取消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import axios from '@/axios/index';
import { defineModel, onBeforeUnmount, onMounted, reactive, ref, shallowRef } from 'vue';
import { ElMessage } from "element-plus";
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

let updateDialog = defineModel('updateDialog');
const emit = defineEmits(['loadData']);
const row = defineModel('row');
const RowData = ref(JSON.parse(JSON.stringify(row.value)));



const mode = ref('default');
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    // 这里如果要模拟异步获取内容，可以设置 formData.announcementContent 的值
  }, 1500);
});
const editorConfig = { placeholder: '请输入内容...' };
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor === null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor;
};
const closeDialog = () => {
  RowData.announcementTitle = '';
  RowData.announcementContent = '';
  updateDialog.value = false;
};

// 表单规则
const rules = reactive({
  announcementTitle: [
    { required: true, message: '请输入公告标题', trigger: 'blur' },
    { min: 2, message: '公告标题不低于2位', trigger: 'blur' },
    { max: 50, message: '公告标题不超过50位', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value && value.includes(' ')) {
          callback(new Error('公告标题不能有空格'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  announcementContent: [
    { required: true, message: '请输入公告内容', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!value || value.trim() === '<p><br></p>') {
          callback(new Error('公告内容不能为空！'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
});

// 表单引用
const ruleFormRef = ref();
const save = () => {
  if (!ruleFormRef.value) return;
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      axios.post('/announcement/update', null, {
        params: {
          announcementId: RowData.value.announcementId,
          announcementTitle: RowData.value.announcementTitle,
          announcementContent: RowData.value.announcementContent
        },
      }).then(resp => {
        ElMessage({
          message: resp.data.message,
          type: 'success',
          duration: 1500,
          onClose: function(){
            updateDialog.value = false
            emit('loadData')
            closeDialog()
          },
        });
      });
    } else {
      ElMessage.error("请检查表单填写是否正确");
    }
  });
};
</script>

<style>
.avatar-uploader.el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader.el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
}

.avatar-uploader.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>